<template>
	<div class="container">
		<view class="navbar">
			<view v-for="(item, index) in navList" :key="index" class="nav-item" :class="{ current: tabIndex === index }" @click="tabClick(index)">{{ item.text }}</view>
		</view>

		<view class="center">
			<swiper :current="tabIndex" class="swiper-box" duration="300" @change="changeTab">
				<swiper-item class="tab-content" v-for="(tabItem, tabIndex) in navList" :key="tabIndex">
					<scroll-view class="list-scroll-content" scroll-y>
						<view class="box">
							<view class="top">
								<block v-if="tabIndex == 0">
									<view class="top-left">
										支付宝收款二维码
										<view class="uploading-box-img" @click="choose">
											<view v-if="imgsrc == ''"><image class="add" src="../../static/card/add.png" mode=""></image></view>
											<image class="add1" :src="imgsrc" mode="widthFix" v-else></image>
										</view>
									</view>
								</block>

								<block v-else-if="tabIndex == 1">
									<view class="top-left">
										微信收款二维码
										<view class="uploading-box-img" @click="choose1">
											<view v-if="imgsrc1 == ''"><image class="add" src="../../static/card/add.png" mode=""></image></view>
											<image class="add1" :src="imgsrc1" mode="widthFix" v-else></image>
										</view>
									</view>
								</block>

								<block v-else>
									<view style="width: 100%;">
										<view class="list">
											<view class="li-text">开户银行</view>
											<view class="li-right"><input class="input" type="text" v-model="bank_name" placeholder="请输入银行名称" /></view>
										</view>

										<view class="list">
											<view class="li-text">开户人姓名</view>
											<view class="li-right"><input class="input" type="text" v-model="bank_user" placeholder="请输入开户人姓名" /></view>
										</view>

										<view class="list">
											<view class="li-text">银行卡号</view>
											<view class="li-right"><input class="input" type="text" v-model="bank_number" placeholder="请输入银行卡号" /></view>
										</view>
									</view>
								</block>
							</view>
							<view class="top" style="margin-top: 20upx;"><view class="top-left">提现数量</view></view>
							<view class="li-center">
								<view class="left">￥</view>
								<input type="text" value="" class="input" v-model="amount" placeholder="请输入提现数量" />
								<text style="color: #f81149;" @click="all(now_money)">全部提现</text>
							</view>

							<view class="top">
								<view class="top-center">当前可用购物积分 {{ now_money }}</view>
							</view>
							<view class=""  style="border-bottom: 1px solid #f4f4f4;margin-left: 40upx;margin-right: 40upx;height: 100upx;display: flex;align-items: center;">
								<input type="password" value="" placeholder="请输入交易密码" placeholder-style="color:#cccccc;fontSize:28upx" v-model="pay"  maxlength="6"/>
							</view>
							<view class="box code">
								<input type="text" value="" placeholder="请输入验证码" placeholder-style="color:#cccccc;fontSize:28upx" v-model="code" />
								<view class="" v-if="!countDown" @click="getCode">{{ codeText }}</view>
								<view class="" v-if="countDown">
									<u-count-down
										:timestamp="timestamp"
										:show-days="false"
										:show-hours="false"
										:show-minutes="false"
										@change="changes"
										@end="countDownEnd"
										bg-color="#f81149;"
										color="#fff"
									></u-count-down>
									s
								</view>
							</view>
						</view>

						<button class="btn-submit" @tap="submit" v-if="status == 1">提现</button>

						<button class="btn-submit" v-else>提现</button>
						<view class="charge">提现说明：提现手续费{{ chargeMoney }}%，最低提现{{ min }}购物积分</view>
					</scroll-view>
				</swiper-item>
			</swiper>
		</view>
	</div>
</template>

<script>
import service from '@/store/service.js';
export default {
	data() {
		return {
			tabIndex: 0,
			bank_name: '',
			bank_user: '',
			bank_number: '',
			imgsrc: '',
			imgsrc1: '',
			chargeMoney: '',
			min: '',
			switchButton: '',
			money: '',
			pay:'',
			navList: [
				{
					text: '提现到支付宝',
					state: '0',
					type: 'app_alipay'
				},
				{
					text: '提现到微信',
					state: '1',
					type: 'app_weixin'
				},
				{
					text: '提现到银行卡',
					state: '3',
					type: 'app_bank'
				}
			],
			id: 0,
			countDown: false,
			code: '', //验证码
			codeText: '验证码',
			type: 'app_alipay',
			alipay_qr_code: '',
			alipay_account: '',
			alipay_type: 0,
			alipay_user: '',

			weixin_qr_code: '',
			weixin_type: 0,
			weixin_user: '',

			withdrawal: '银行',
			bank_type: 0,

			now_money: '0.00',
			amount: '',
			status: 1
		};
	},
	onLoad: function() {
		this.charge();
		this.imgsrc = uni.getStorageSync('imgsrc');
		console.log(this.imgsrc, 1);
		this.imgsrc1 = uni.getStorageSync('imgsrc1');
		console.log(this.imgsrc1, 2);
		this.bank_user = uni.getStorageSync('bank_user');
		console.log(this.bank_name, 3);
		this.bank_number = uni.getStorageSync('bank_number');
		console.log(this.bank_number, 4);
		this.bank_name = uni.getStorageSync('bank_name');
		console.log(this.bank_name, 5);
	},
	onShow: function() {
		var self = this;
		self.$http.post(service.api.user.info, {}).then(function(res) {
			var list = res.data;
			self.now_money = list.credit3;
			self.mobile = list.mobile;
		});
	},
	methods: {
		//获取验证码
		getCode() {
			let that = this;

			if (that.mobile == '') {
				that.$api.msg('请输入手机号');
				return;
			}
			//手机号码正则验证
			if (!/^1[3-9][0-9]\d{8,11}$/.test(that.mobile)) {
				uni.showToast({
					icon: 'none',
					title: '手机号码格式不正确'
				});
				return;
			}
			that.$http
				.get(service.api.login.code, {
					mobile: that.mobile,
					temp: 'sms_reg'
				})
				.then(function(res) {
					console.log(res);
					if (res.code === 1) {
						that.countDown = !that.countDown;
						that.$api.msg('验证码发送成功');
						that.codeText = '重新获取';
						setTimeout(() => {
							that.$api.msg(res.info);
						}, 1500);
					} else {
						that.$api.msg(res.info);
					}
				});
		},
		charge() {
			var self = this;
			self.$http.get(service.api.upload.withdrawalSet, {}).then(function(res) {
				var list = res.data;
				self.chargeMoney = list.charge_percentage;
				self.switchButton = list.opend_withdrawal;
				self.min = list.withdrawmoney;
			});
		},
		choose() {
			var self = this;
			uni.chooseImage({
				count: 1,
				sizeType: ['compressed'],
				sourceType: ['album', 'camera'],
				success: res => {
					var imageSrc = res.tempFilePaths[0];
					self.$http.upload(service.api.user.upload + '?token=' + uni.getStorageSync('token'), imageSrc, 'image').then(function(res) {
						uni.hideLoading();
						uni.showToast({
							icon: 'none',
							title: '图片上传成功'
						});
						if (res.code == 1) {
							self.imgsrc = res.data.img_url;
						console.log('上传成功',self.imgsrc)
						}
					});
				},
				fail: err => {
					console.log('chooseImage fail', err);
				}
			});
		},
		choose1() {
			var self = this;
			uni.chooseImage({
				count: 1,
				sizeType: ['compressed'],
				sourceType: ['album', 'camera'],
				success: res => {
					var imageSrc = res.tempFilePaths[0];
					self.$http.upload(service.api.user.upload + '?token=' + uni.getStorageSync('token'), imageSrc, 'image').then(function(res) {
						uni.hideLoading();
						uni.showToast({
							icon: 'none',
							title: '图片上传成功'
						});
						if (res.code == 1) {
							self.imgsrc1 = res.data.img_url;
						}
					});
				},
				fail: err => {
					console.log('chooseImage fail', err);
				}
			});
		},
		all(num) {
			this.amount = num;
		},
		jumpurl(url, type) {
			uni.setStorageSync('draw', type);
			uni.navigateTo({
				url: url
			});
		},
		//swiper 切换
		changeTab(e) {
			this.tabClick(e.target.current);
		},

		//顶部tab点击
		tabClick(index) {
			this.change(index);
		},
		change(index) {
			this.type = this.navList[index].type;
			this.tabIndex = index;
		},
		submit() {
			var self = this;
			// console.log(self.amount);
			self.money = self.amount - (self.amount * self.chargeMoney) / 100;
			// console.log(self.money);
			if (self.money == '') {
				uni.showToast({
					icon: 'none',
					title: '请填写数量'
				});
			} else {
				uni.showModal({
					title: '温馨提示',
					content: `提现数量${self.amount},实际到账数量:${self.money}`,
					success(res) {
						if (res.confirm) {
							if (self.tabIndex == 0) {
								let type = 2;
								uni.setStorageSync('imgsrc', self.imgsrc);
								self.$http
									.post(service.api.upload.withdrawal, {
										number: self.amount,
										alipay: self.imgsrc,
										type: type,
										pay_type: 0,
										transaction_pw:self.pay,
										code:self.code,
										mobile:self.mobile
									})
									.then(function(res) {
										self.$api.msg(res.info);
										if (res.code == 1) {
											setTimeout(function() {
												uni.navigateBack({
													delta: 1
												});
											}, 1500);
										}
									});
							} else if (self.tabIndex == 1) {
								uni.setStorageSync('imgsrc1', self.imgsrc1);
								let type = 1;
								self.$http
									.post(service.api.upload.withdrawal, {
										number: self.amount,
										wechat: self.imgsrc1,
										type: type,
										pay_type: 0,
										transaction_pw:self.pay,
										code:self.code,
										mobile:self.mobile
									})
									.then(function(res) {
										self.$api.msg(res.info);
										if (res.code == 1) {
											setTimeout(function() {
												uni.navigateBack({
													delta: 1
												});
											}, 1500);
										}
									});
							} else {
								let type = 3;
								uni.setStorageSync('bank_user', self.bank_user);
								uni.setStorageSync('bank_number', self.bank_number);
								uni.setStorageSync('bank_name', self.bank_name);
								self.$http
									.post(service.api.upload.withdrawal, {
										number: self.amount,
										real_name: self.bank_user,
										bank_card: self.bank_number,
										open_household: self.bank_name,
										type: type,
										pay_type: 0,
										transaction_pw:self.pay,
										code:self.code,
										mobile:self.mobile
									})
									.then(function(res) {
										self.$api.msg(res.info);
										if (res.code == 1) {
											setTimeout(function() {
												uni.navigateBack({
													delta: 1
												});
											}, 1500);
										}
									});
							}
						} else {
							self.$api.msg('提现取消');
						}
					}
				});
			}
		}
	}
};
</script>
<style lang="scss" scoped>
.container {
	/* #ifndef APP-PLUS-NVUE */
	display: flex;
	flex-direction: column;
	/* #endif */
	flex: 1;
}

.swiper-box {
	height: 100%;
}

.list-scroll-content {
	height: 100%;
}

.navbar {
	display: flex;
	height: 40px;
	padding: 0 5px;
	background: #fff;
	box-shadow: 0px 4upx 8upx #dcdfe6;
	position: relative;
	z-index: 200;

	.nav-item {
		flex: 1;
		display: flex;
		justify-content: center;
		align-items: center;
		height: 100%;
		font-size: 15px;
		color: #303133;
		position: relative;

		&.current {
			color: #f81149;
			border-bottom: 2px solid #fa436a;

			&:after {
				content: '';
				position: absolute;
				left: 50%;
				bottom: 0;
				transform: translateX(-50%);
				width: 60px;
				height: 0;
			}
		}
	}
}

.center {
	width: 100%;
	z-index: 120;
	padding-top: 80upx;
	position: absolute;
	height: calc(100% - 80upx);
}

.container {
	width: 100%;
	background: #f2f2f2;
}

.box {
	// width: calc(100% - 40upx);
	margin: 30upx;
	background: #ffffff;
	border-radius: 20upx;
	padding-bottom: 40upx;
	// box-shadow: 0 0 6upx #d3d3d3;
	// margin-top: 0;
	padding-top: 30upx;
}

.top {
	display: flex;
	font-size: 28upx;
	padding: 0 30upx;
	line-height: 80upx;
}

.top-left {
	// width: 240upx;
	color: #555555;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	flex-wrap: wrap;
}

.top-right {
	color: #d76764;
	text-align: right;
	width: calc(100% - 200upx);
}

.li-center {
	display: flex;
	align-items: center;
	padding: 0 20upx;
	border-bottom: 1px solid #f4f4f4;
}

.top-center {
	width: 100%;
	color: #555555;
	margin-top: 30upx;
}

.left {
	width: 80upx;
	height: 80upx;
	font-size: 36upx;
	font-weight: bold;
	text-align: center;
	line-height: 80upx;
}

.input {
	height: 80upx;
	line-height: 80upx;
	width: calc(100% - 220upx);
}

.btn-submit {
	width: 90%;
	height: 80upx;
	color: #ffffff;
	line-height: 80upx;
	margin: 30upx 5% 0;
	background: #f81149;
	border-radius: 10upx;
}

.uploading {
	width: 100%;
}

.uploading-img {
	width: 60%;
	margin: 0 20%;
}

.uploading-box-img {
	// width: 195upx;
	// height: 195upx;
	// margin-left: 20upx;
	margin-top: 40upx;

	// margin-bottom: 40upx;
	.add {
		width: 195upx;
		height: 195upx;
		margin-left: 20upx;
		// margin-bottom: 80upx;
		border: 1px dashed #888;
	}

	.add1 {
		width: 195upx;
		height: 195upx;
		margin-left: 20upx;
		// margin-bottom: 80upx;
	}
}

.li-right {
	border-bottom: 1px solid #f4f4f4;
}

.charge {
	margin-left: 50upx;
	margin-top: 20upx;
}

.li-text {
	margin-top: 10upx;
}
.box {
	padding: 40upx 0;
	border-bottom: 1upx solid #f4f4f4;
	color: #333333;
}

.code {
	display: flex;
	align-items: center;
	justify-content: space-between;

	> view {
		width: 124upx;
		height: 52upx;
		line-height: 52upx;
		text-align: center;
		border-radius: 26upx;
		background-color: #f81149;
		font-size: 28upx;
		color: #ffffff;
	}
}

.btn {
	width: 630upx;
	height: 100upx;
	line-height: 100upx;
	text-align: center;
	border-radius: 50upx;
	color: #ffffff;
	background-color: #f81149;
	font-size: 36upx;
	margin: 60upx auto 0 auto;
}
</style>
